<template>
  <div class="dashboard-container">
    <div class="app-container">
      <h2>
        <PageTools :show-before="true">
          <template #before>
            <span>共177条记录</span>
          </template>
          <template #after>
            <el-button type="danger" size="mini" @click="excelExport">普通excel导出</el-button>
            <el-button type="info" size="mini">复杂表头导出</el-button>
            <el-button type="success" size="mini" @click="$router.push('/import')">excel导入</el-button>
            <el-button type="primary" size="mini" @click="showDialog=true">新增员工</el-button>
          </template>
        </PageTools>
      </h2>
      <!-- 放置表格和分页 -->
      <el-card v-loading="loading">
        <el-table border :data="list">
          <el-table-column label="序号" sortable="" type="index" width="50px" />
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="头像" sortable="" prop="staffPhoto" width="150px">
            <template slot-scope="{row}">
              <img
                v-errorImg="require(&quot;../../assets/common/head.jpg&quot;)"
                :src="row.staffPhoto"
                alt=""
                style="width:100%;height:100%"
                @click="showQrCode(row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" />
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="" prop="timeOfEntry" />
          <el-table-column label="账户状态" sortable="" />
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="$router.push('/employees/detail/'+row.id)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="showAssignRoleDialog(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="removeEmployees(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            layout="total,prev, pager, next"
            :page-size="pageParams.size"
            :current-page="pageParams.page"
            :total="pageParams.total"
            @current-change="changePage"
          />
        </el-row></el-card>
      <!-- 弹层组件 -->
      <AddEmployees :show-dialog.sync="showDialog" />
      <!-- 二维码弹层 -->
      <el-dialog title="手机扫一扫" :visible.sync="showCodeDialog" @close="imgUrl=''">
        <el-row type="flex" justify="center">
          <canvas ref="myCanvas" class="canvas" />
        </el-row>
      </el-dialog>
      <!-- 分配角色 -->
      <AssignRole :show-role-dialog.sync="showRoleDialog" :current-id="currentId" />
    </div>
  </div>
</template>

<script>
import AddEmployees from './components/add-employees.vue'
import { getEmployeeList, delEmployee } from '@/api/employees'
import QrCode from 'qrcode'
import AssignRole from './components/assign-role.vue'
// import { export_json_to_excel } from '@/vendor/Export2Excel'
export default {
  components: { AddEmployees, AssignRole },
  data() {
    return {
      pageParams: {
        page: 1, // 当前页码
        size: 10,
        total: 0 // 总数
      },
      list: [], // 表格数据
      loading: false,
      showDialog: false, // 显示弹层
      showCodeDialog: false, // 二维码弹层
      showRoleDialog: false, // 分配权限弹层
      currentId: '' // 当前用户的id
    }
  },
  created() {
    this.getEmployeeList()
  },
  methods: {
    changePage(newPage) {
      this.pageParams.page = newPage
      this.getEmployeeList()
    },
    async getEmployeeList() {
      this.loading = true
      const { total, rows } = await getEmployeeList(this.pageParams)
      this.pageParams.total = total
      this.list = rows
      this.loading = false
    },
    // 删除角色
    async  removeEmployees(id) {
      //  提示
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delEmployee(id) // 调用删除接口
        this.getEmployeeList() // 重新加载数据
        this.$message({
          type: 'success',
          message: '删除角色成功!'
        })
      } catch (error) {
        console.log(error)
      }
    },
    // excel导出
    async  excelExport() {
      const excel = await import('@/vendor/Export2Excel')
      console.log('excel导出', excel)
      const { rows } = await getEmployeeList({
        page: 1,
        size: this.pageParams.total
      })
      // 数据映射表
      const headers = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      const data = this.FormDataExcel(rows, headers)
      console.log(data)
      excel.export_json_to_excel({
        header: Object.keys(headers), // 表头 必填
        multiHeader: [['姓名', '主要信息', '', '', '', '', '部门']], // 复杂表头
        merges: ['A1:A2', 'B1:F1', 'G1:G2'], // 合并
        data: data, // 具体数据 必填
        filename: '员工列表', // 非必填
        autoWidth: true, // 非必填
        bookType: 'xlsx' // 非必填
      })
    },
    FormDataExcel(employees, headers) {
      console.log(employees)
      // [{},{},{},{}]===>[[],[],[],[]]
      const arr = employees.map((item) => {
        // console.log(item)
        return Object.keys(headers).map((keys) => {
          return item[headers[keys]]
        })
      })
      return arr
    },
    // 显示二维码
    showQrCode(url) {
      this.showCodeDialog = true
      if (url) {
        this.$nextTick(() => {
          QrCode.toCanvas(document.querySelector('canvas'), url) // 将地址转化成二维码
        })
      } else {
        this.$message.error('该用户未上传头像！')
      }
    },
    // 点击角色分配
    showAssignRoleDialog(id) {
      this.showRoleDialog = true
      this.currentId = id
    }
  }
}
</script>

<style scoped lang='scss'>
.canvas{
  width: 150px;
  height: 150px;
}
</style>
